<template>
    <el-input
        v-model="dtoValue"
        v-bind="schema"
        :placeholder="placeholder"
        class="input"
    ></el-input>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const { schemaKey,schema }= defineProps({
    schemaKey: String,
    schema: Object
})
const emit = defineEmits([ 'loaded' ]);

const dtoValue = ref()
const placeholder = ref('');
const initData = () => {
  const { minLength, maxLength, pattern } = schema;
  const ruleList = [];
  if (schema.option?.placeholder) {
    ruleList.push(schema.option.placeholder);
  }
  if (minLength) {
    ruleList.push(`最小长度：${minLength}`);
  }
  if (maxLength) {
    ruleList.push(`最大长度：${maxLength}`);
  }
  if (pattern) {
    ruleList.push(`格式：${pattern}`);
  }
  placeholder.value = ruleList.join(' ');
};
onMounted(() => {
  initData();
});
watch([schema],() => {
    initData();
  },{ deep: true },
);
const getValue = ()=>{
    return dtoValue.value !== undefined ? {
        [schemaKey]: dtoValue.value
} : {}
}

const reset = () => {
    dtoValue.value = schema?.option?.default;
}

onMounted(() => {
    reset()
    emit('loaded')
})

defineExpose({
    getValue,
    reset
})
</script>
<style lang="less" scoped></style>